<template>
	<view class="page">
		<!-- 轮播图start -->
		<swiper :indicator-dots="true" :autoplay="true">
			<swiper-item v-for="item in swiperList" :key="item.id">
				<image class="swiper-item" :src="item.image" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<!-- 轮播图end -->
		<!-- 热门电影start -->
		<view class="page-block super-hot">
			<view class="titlebox">
				<image src="../../static/icon/hot.png" class="ico" mode=""></image>
				<view class="title">
					热门电影
				</view>
			</view>
			<scroll-view scroll-x="true" class="page-block">
				<view class="single-poster" v-for="(item,index) in hotData" :key="index">
					<image :src="item.images.medium" mode=""></image>
					<view class="movie-title">
						{{item.title}}
					</view>
					<scoreStars :innerScore="item.rating.average"></scoreStars>
				</view>
			</scroll-view>
		</view>
		<!-- 热门电影end -->
		
		<!-- 热门预告start -->
		<view class="page-block hot-video">
			<view class="titlebox">
				<image src="../../static/icon/interest.png" class="ico" mode=""></image>
				<view class="title">
					热门预告
				</view>
			</view>
			<view class="video-box page-block">
				<video v-for="item in hotTrailerList" :key="item.id"
				:src="item.src"
				:poster="item.poster"
				controls
				 ></video>
			</view>
			
		</view>
		<!-- 热门预告end -->
		<!-- 猜你喜欢start -->
		<view class="page-block ">
			<view class="titlebox">
				<image src="../../static/icon/guess-u-like.png" class="ico" mode=""></image>
				<view class="title">
					猜你喜欢
				</view>
			</view>
			<view class="page-block guess-u-like">
				<view v-for="(item,index) in guessData" class="single-like" :key="index">
					<image src="item.images.medium" mode=""></image>
					<view class="like-desc">
						<view class="like-title">
							{{item.title}}
						</view>
						<score-stars innerScore="9.3" isScore="false"></score-stars>
						<view class="like-info">
							<template v-for="casts in item.casts" >
								{{casts.name}}
							</template>
						</view>
						<view class="like-info">
							{{item.pubdates[0]}}
						</view>
					</view>
					<view class="like-oper" :data-gindex="gindex" @click="praiseMe()">
						<image src="../../static/icon/praise.png" mode=""></image>
						<view class="zan1">
							点赞
						</view>
						<view class="zan1 zan" :animation="zanAnimation[index]">
							+1
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<!-- 猜你喜欢end -->
	</view>
</template>

<script>
	import scoreStars from '../../components/scoreStars.vue'
	export default {
		components: {
			scoreStars
		},
		data() {
			return {
				
				swiperList: [{
						"id": 1,
						"movieID": "",
						// 使用https://images.weserv.nl/?url=方式解决forbidden问题
						"image": "https://images.weserv.nl/?url=img1.doubanio.com/view/photo/l/public/p2410755737.webp",
						"sort": 1,
						"isShow": 1
					},
					{
						"id": 2,
						"movieID": "",
						"image": "https://images.weserv.nl/?url=//img3.doubanio.com/view/photo/l/public/p2556561071.webp",
						"sort": 1,
						"isShow": 1
					},
					{
						"id": 3,
						"movieID": "",
						"image": "https://images.weserv.nl/?url=img1.doubanio.com/view/photo/l/public/p2559849368.webp",
						"sort": 1,
						"isShow": 1
					},
					{
						"id": 4,
						"movieID": "",
						"image": "https://images.weserv.nl/?url=img3.doubanio.com/view/photo/l/public/p2432517600.webp",
						"sort": 1,
						"isShow": 1
					}
				],
				tagList: [{
					hotTitle: '热门超英',
					imgSrc: '../../static/icons/hot.png'
				}, {
					hotTitle: '热门预告',
					imgSrc: '../../static/icons/interest.png'
				}, {
					hotTitle: '猜你喜欢',
					imgSrc: '../../static/icons/guess-u-like.png'
				}],
				hotData: [], //热门超英数据
				hotCount: 10, //每次请求数据量
				// 热门预告
				hotTrailerList: [{
						id: '001',
						src: 'https://vod.pipi.cn/43903a81vodtransgzp1251246104/e26193775285890818567755450/v.f42905.mp4',
						poster: 'https://obj.pipi.cn/friday/196fd0ec1eddab6f65232030dd144a09.jpg?imageView2/1/w/138/h/78'
					},
					{
						id: '002',
						src: 'https://vod.pipi.cn/43903a81vodtransgzp1251246104/db526bc35285890816421263215/v.f42905.mp4',
						poster: 'https://obj.pipi.cn/friday/a3b0e43c18729adcf0d9335a11cf6dc4.jpeg?imageView2/1/w/138/h/78'
					},
					{
						id: '003',
						src: 'https://vod.pipi.cn/fe5b84bcvodcq1251246104/3662c0795285890796589055351/f0.mp4',
						poster: 'https://p0.meituan.net/movie/f8e86bca7ec39b546785417c60e2d37116460.jpg@138w_78h_1e_1c'
					},
					{
						id: '004',
						src: 'https://vod.pipi.cn/43903a81vodtransgzp1251246104/ae35b4e95285890816332884004/v.f42905.mp4',
						poster: 'https://obj.pipi.cn/friday/127420d90b0396e60829f7a6254a735d.png?imageView2/1/w/138/h/78'
					},
				],
				// 猜你喜欢
				guessData: [],
				guessCount: 5, //每次请求数据量
				// 视频上下文对象
				videoCtx: null,
				videoId: null,
				//动画
				zanAnimation:[{},{},{},{},{}],
			}
		},
		onUnload() {
			this.zanAnimation = [];
		},
		onLoad() {
			//创建临时动画对象
			this.zanAni = uni.createAnimation({
				timingFunction: "ease",
			});
			
			
		},
		created() {
			this.getHotData()
			this.getGuessData()
		},
		onPullDownRefresh() {
			//下拉刷新
		},
		methods: {
			//点赞
			praiseMe(e){
				let tarindex =  e.currentTarget.dataset.gindex;
				this.zanAni.translateY(-80).opacity(1).step({
					duration:400
				})
				this.animationData=this.zanAni
				this.zanAnimation[tarindex] = this.animationData.export();
				setTimeout(()=>{
					this.zanAni.translateY(0).opacity(0).step({
						duration:0
					});
					this.animationData=this.zanAni
					this.zanAnimation[tarindex] = this.animationData.export();
				},500)
			},
			
			// 获取热门数据
			getHotData() {
				// 特别注意：非H5端不能用uni.request来请求本地json数据！！！
				// const dataRes=await this.$http({url:'/new_movies.json'})
				const {
					subjects: dataRes
				} = require('../../static/mock/top250.json')
				// 截取10条数据
				let newArr = []
				for (let i = 3; i < dataRes.length; i++) {
					if (i + this.hotCount - 10 < this.hotCount) {
						let item = dataRes[i + this.hotCount - 10]
						// 对图片做处理
						item.images.small = item.images.small.replace('https://', 'https://images.weserv.nl/?url=')
						newArr.push(item)
					}
				}
				this.hotData = [...this.hotData, ...newArr]
				
			},
			// 获取猜你喜欢数据
			getGuessData() {
				const {
					subjects: dataRes
				} = require('../../static/mock/weekly.json')
				// 截取5条数据，每次展示5条
				let newArr = []
				for (let i = 0; i < dataRes.length; i++) {
					if (i + this.guessCount - 5 < this.guessCount) {
						let item = dataRes[i + this.guessCount - 5].subject
						// 对图片做处理
						// item.images.small = item.images.small.replace('https://', 'https://images.weserv.nl/?url=')
						newArr.push(item)
					}
				}
				this.guessData = newArr
				console.log(this.hotData)
			},
		}
	}
</script>

<style>
	@import url("index.css");
</style>
